<template>
	<view class="setting-nickname-wrapper ">
		<view class="conteainer-public-style mg24 flex-c-s">
			<input type="text" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="name" placeholder="请输入昵称" /> 
			<uni-icons type="closeempty" size="16" color="#999" @click="clearValue"></uni-icons>
		</view>
		<button class="public-large-btn b-r16" @click="updateNickName">保 存</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { updateUserLoginInfo } from '@/utils/tools'
import { setNickName, getUserDetail } from '@/http/my'

export default defineComponent({
	setup() {
		const name = ref('')
		
		onLoad((options) => {
			if(options!.name) {
				name.value = options!.name
			} 
		})
		
		const updateNickName = async () => {
			if(!name.value) {
				uni.showToast({
					title: '昵称不能为空',
					icon: 'error'
				})
				return
			}
			let res = await setNickName({nickName: name.value})
			
			if(res.code === 0) {
				await updateUserLoginInfo(() => {
					console.log(res);
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
				}, (msg: string) => {
					uni.showToast({
						title: msg || '更新失败',
						icon: 'none'
					})
				})
				
			}
			
		}
		
		const clearValue = () => name.value = '';
		return {
			name,
			updateNickName,
			clearValue
		}
	}
})
</script>

<style>
	page{ background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.setting-nickname-wrapper{
	.b-r16{
		margin-top: 40rpx;
		border-radius: 16rpx;
	}
}
</style>